<!--
 * @Autor: Wei
 * @Date: 2020-04-20 14:25:11
 * @LastEditors: Wei
 * @LastEditTime: 2020-06-08 12:09:27
 -->
<template>
  <div>
    <div class="userBox">
      <div class="userHeadImg">
        <el-avatar
          :size="80"
          :src="defaultAvatarURL + userInfo.head_portrait"
        ></el-avatar>
        <div class="userName">{{ userInfo.name }}</div>
        <div class="userCenter">
          <el-button
            round
            class="searchBtn"
            @click="navigationSelect('/personalCenter')"
            >个人中心</el-button
          >
        </div>
      </div>
      <div class="bottomBox">
        <div class="bottomItem">
          <div class="itemNum">{{ userStauts.articleNum }}</div>
          <div class="itemTitle">帖子</div>
        </div>
        <div class="bottomItem">
          <div class="itemNum">{{ userStauts.answerNum }}</div>
          <div class="itemTitle">回答</div>
        </div>
        <div class="bottomItem">
          <div class="itemNum">{{ userStauts.commenteNum }}</div>
          <div class="itemTitle">评论</div>
        </div>
        <div class="bottomItem">
          <div class="itemNum">{{ userStauts.integral }}</div>
          <div class="itemTitle">积分</div>
        </div>
      </div>
    </div>

    <div class="noticeBox">
      <div class="noticeBoxTitle">
        <el-tooltip content="写文章" placement="top">
          <div class="release" @click="navigationSelect('/write')">
            <span class="iconfont">&#xe695;</span>
          </div>
        </el-tooltip>
        <el-tooltip content="提问" placement="top">
          <div class="question" @click="navigationSelect('/writeQuestion')">
            <span class="iconfont">&#xe612;</span>
          </div>
        </el-tooltip>
        <el-tooltip content="签到" placement="top">
          <div class="sign" @click="ToSign()">
            <span class="iconfont">&#xe635;</span>
          </div>
        </el-tooltip>
        <el-tooltip content="积分兑换" placement="top">
          <div class="shop" @click="navigationSelect('/IntegralMall')">
            <span class="iconfont">&#xe61a;</span>
          </div>
        </el-tooltip>
      </div>

      <!-- <div class="noticeBoxTitle">
        <el-tooltip content="写文章" placement="top">
          <div class="release" @click="textEditor">
            <span class="iconfont">&#xe695;</span>
          </div>
        </el-tooltip>
        <el-tooltip content="签到" placement="top">
          <div class="sign">
            <span class="iconfont">&#xe635; </span>
          </div>
        </el-tooltip>
        <el-tooltip content="积分兑换" placement="top">
          <div class="shop" @click="navigationSelect('/IntegralMall')">
            <span class="iconfont">&#xe61a;</span>
          </div>
        </el-tooltip>
      </div>-->

      <div class="noticeBoxColumn">
        <div class="bell">
          <span class="iconfont">&#xe65b;</span>
        </div>
        <div class="noticeBoxColumnTitle">公告栏</div>
      </div>

      <div class="messageBox">
        <div
          class="messageItem"
          v-for="(item, index) in ruleListData"
          :key="index"
          @click="shouRules(item)"
        >
          {{ item.rule_title }}
        </div>
      </div>
    </div>

    <div class="footerBox">
      <div class="footNav">
        <span class="footItm" @click="navigationSelect('/home')">首页</span>
        <el-divider direction="vertical"></el-divider>
        <span class="footItm" @click="navigationSelect('/workVoting')"
          >工作投票</span
        >
        <el-divider direction="vertical"></el-divider>
        <span class="footItm" @click="navigationSelect('/resourceSharing')"
          >资料共享</span
        >
        <el-divider direction="vertical"></el-divider>
        <span class="footItm" @click="navigationSelect('/personalCenter')"
          >个人中心</span
        >
      </div>
      <div class="website">
        <span class="footItm">珠海港官网</span>
      </div>
      <div class="website">
        <span>
          Copyright @2009-2015 珠海股份有限公司版权所有 粤ICP备2001032号-1
        </span>
      </div>
      <div class="website">
        <span>地址:珠海市情侣路南路278号</span>
      </div>
      <div class="website">
        <span>粤公网安备44049002000443号</span>
      </div>
    </div>

    <div class="xiaoChenXu">
      <div class="erWeiMa"></div>
      <div class="xiaoChenXuTitle">扫描进入小程序</div>
    </div>
    <el-dialog title="公告" :visible.sync="centerDialogVisible" width="40%">
      <div v-html="showRulesText"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { defaultAvatarURL } from "../../utils/global";
import { getSituation } from "@/api/getSituation";
import { get_rule } from "@/api/rules";

export default {
  name: "statusBar",
  computed: {
    ...mapGetters(["userInfo"])
  },
  data() {
    return {
      defaultAvatarURL,
      userStauts: {},
      integral: this.$store.getters.userInfo.integral,
      ruleListData: [],
      centerDialogVisible: false,
      showRulesText: ""
    };
  },
  async created() {
    let stauts = await getSituation({
      userid: this.$store.getters.userInfo._id
    });
    console.log("stauts", stauts);
    this.userStauts = stauts.data;
    this.getRules();
  },
  methods: {
    async getRules() {
      let rulesData = await get_rule({
        query: {},
        sort: {
          upload_time: -1
        },
        limit: 10
      });
      console.log("公告：", rulesData);

      this.ruleListData = rulesData.data;
    },
    shouRules(item) {
      this.showRulesText = this.formatRichText(item.rule_content);
      this.centerDialogVisible = true;
    },
    //路由
    navigationSelect(path) {
      this.$router.push(path);
    },
    async ToSign() {
      this.$finish_taskdata(0, this.$store.getters.userInfo._id);
    },
    formatRichText(html) {
      //控制小程序中图片大小
      let newContent = html.replace(/<img[^>]*>/gi, function(match) {
        match = match
          .replace(/style="[^"]+"/gi, "")
          .replace(/style='[^']+'/gi, "");
        match = match
          .replace(/width="[^"]+"/gi, "")
          .replace(/width='[^']+'/gi, "");
        match = match
          .replace(/height="[^"]+"/gi, "")
          .replace(/height='[^']+'/gi, "");
        return match;
      });
      newContent = newContent.replace(/style="[^"]+"/gi, function(match) {
        match = match
          .replace(/width:[^;]+;/gi, "max-width:100%;")
          .replace(/width:[^;]+;/gi, "max-width:100%;");
        return match;
      });
      newContent = newContent.replace(/<br[^>]*\/>/gi, "");
      newContent = newContent.replace(
        /<img/gi,
        '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"'
      );
      return newContent;
    }
  }
};
</script>

<style lang="scss" scoped>
.userBox {
  width: 100%;
  box-sizing: border-box;
  min-height: 250px;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  .userHeadImg {
    text-align: center;
    margin-top: 10px;
    .userName {
      font-size: 20px;
      font-weight: 600;
      color: #6c6c6c;
      margin-top: 5px;
    }
    .userCenter {
      margin-top: 10px;
      .searchBtn {
        background: #3257b5;
        border: #1d2f70;
        color: #fff;
        &:hover {
          background: #7d99e2;
        }
      }
    }
  }
  .bottomBox {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    text-align: center;
    .itemNum {
      font-size: 22px;
      font-weight: 600;
    }
    .itemTitle {
      color: #6c6c6c;
    }
  }
}
.noticeBox {
  min-height: 200px;
  background: #fff;
  margin-top: 20px;
  border-radius: 10px;
  width: 100%;
  // padding: 20px;
  .noticeBoxTitle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 100px;
    text-align: center;
    line-height: 100px;
    .release {
      color: #3257b5;
      width: 25%;
      height: 100%;
      border-bottom: #f6f9fc solid 3px;
      cursor: pointer;
      &:hover {
        background: rgb(224, 222, 222);
      }
    }
    .question {
      color: #37f637;
      width: 25%;
      height: 100%;
      border-right: #f6f9fc solid 3px;
      border-bottom: #f6f9fc solid 3px;
      border-left: #f6f9fc solid 3px;
      cursor: pointer;
      &:hover {
        background: rgb(224, 222, 222);
      }
    }
    .sign {
      color: #f6ef37;
      width: 25%;
      height: 100%;
      border-right: #f6f9fc solid 3px;
      border-bottom: #f6f9fc solid 3px;
      // border-left: #f6f9fc solid 3px;
      cursor: pointer;
      &:hover {
        background: rgb(224, 222, 222);
      }
    }
    .shop {
      color: #e98f36;
      width: 25%;
      height: 100%;
      border-bottom: #f6f9fc solid 3px;
      cursor: pointer;
      &:hover {
        background: rgb(224, 222, 222);
      }
    }
    .iconfont {
      font-size: 40px !important;
    }
  }
  .noticeBoxColumn {
    display: flex;
    height: 30px;
    line-height: 30px;
    margin-top: 10px;
    padding: 10px;
    .bell {
      color: #ffa500;
    }
    .iconfont {
      font-size: 30px !important;
    }
    .noticeBoxColumnTitle {
      font-size: 18px;
      font-weight: 600;
      margin-left: 5px;
    }
  }
  .messageBox {
    padding-bottom: 10px;
    .messageItem {
      padding: 10px;
      line-height: 18px;
      cursor: pointer;
      color: #262626;
      // width: 290px;
      overflow: hidden;
      text-overflow: ellipsis; //超出部分以省略号显示
      white-space: nowrap;
      &:hover {
        background: #f6f9fc;
      }
    }
  }
}
.footerBox {
  min-height: 180px;
  background: #fff;
  margin-top: 20px;
  border-radius: 10px;
  padding: 20px;
  color: #6c6c6c;
  .footNav {
    width: 290px;
    margin: 0 auto;
  }
  .website {
    text-align: center;
    margin-top: 10px;
  }
  .footItm {
    cursor: pointer;
    &:hover {
      color: #1d2f70;
      font-weight: 600;
    }
  }
}

.xiaoChenXu {
  margin-top: 40px;
  .erWeiMa {
    width: 200px;
    height: 180px;
    margin: 0 auto;
    background: url("../../../public/img/xiaoChenXu/Snipaste_2020-04-17_17-01-33.png");
    background-size: 100% 100%;
  }
  .xiaoChenXuTitle {
    text-align: center;
    margin-top: 15px;
    color: #6c6c6c;
    font-size: 20px;
  }
}
</style>
